<html>
<head>
	
	<style type="text/css">
		#artist_search_res #info{
			float: left;
			margin-right: 10px;
			margin-top: 10px;
		}
		body{
		
		}
	</style>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	
	<title>Concert-Deals</title>
	
	<link type="text/css" href="style_sheet/style.css" rel="stylesheet" media="screen" />
	<link type="text/css" href="style_sheet/table.css" rel="stylesheet" media="screen" />
	<link type="text/css" href="jquery-ui/css/blitzer/jquery-ui-1.8.custom.css" rel="Stylesheet" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.custom.min.js"></script>
	
	<script type="text/javascript">
				
		var eventID = -1;
		var maxPrice = 0;
		var artistURL = "";
		var url_vars;
		$(document).ready(function() {
			
			
			$("#home_page").click(function(e){
					top.location.href = 'http://apps.facebook.com/concert-deals/'
			});
			$("#search_page").click(function(e){
					top.location.href = 'http://apps.facebook.com/concert-deals/concert_search'
			});
			$("#track_page").click(function(e){
					top.location.href = 'http://apps.facebook.com/concert-deals/view_tracks'
			});
				
            $('#search').click(function(e) {
				
                e.preventDefault();
				if ($("#searchtype").val() == "artist") {
					$("#following_list").html('<center><img aliign= "center" src="jquery-ui/images/ajax-loader.gif" /></center>');
					getArtistList();
				} else {
					getEventList("",$("#searchtext").val(),$("#searchdistance").val());
				}
            });
			
			$("#searchtype").change(function(e) {
				displayDistance(e);
			});
			
			$("#artistinfo a").live("click",
			function(e){
				e.preventDefault();
				var artist = $("p", this).html();
				getEventList(artist,"","");
			});
			
			$("#gettickets").live("click",
			function(e){
				e.preventDefault();
				var artist = $(this).attr("artist");
				var date = $(this).attr("date");
				var venue = $(this).attr("venue");
				getTicketList(artist,venue,date,"price");
			});
			
			$("#track").live("click",
			function(e){
				e.preventDefault();
				beginTracking(eventID);
			});
			
			$("#quantity").live("change",
			function(e){
				filterResults();
			});
        });
		
		function displayDistance() {
			
			var distHTML = "";
			
			if ($("#searchtype").val() == "location") {
				distHTML += 'within &nbsp;'
				distHTML += '<select id="searchdistance">';
				distHTML += '<option value="25">25</option>';
				distHTML += '<option value="50">50</option>';
				distHTML += '<option value="100">100</option>';
				distHTML += '<option value="150">150</option>';
				distHTML += '</select>';
				distHTML += '&nbsp; miles &nbsp;';
			}
			
			$("#selectdist").html(distHTML);
		}
		
		
		function getUrlVars()
		{
			    var vars = {};
			    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
			    for(var i = 0; i < hashes.length; i++)
			    {
			        hash = hashes[i].split('=');
					
			        vars[hash[0]] = hash[1];
			    }
			    return vars;
		}
		
		function getArtistList() {
			$("#filters").html("");
			$("#artistinfo").html('<center><img aliign= "center" src="jquery-ui/images/ajax-loader.gif" /></center>');
			$("#eventinfo").html("");
			$("#venueinfo").html("");
			$("#ticketinfo").html("");
			$("#trackinginfo").html("");
			$("#imageinfo").html("");
			$("#eventsinfo").html("");
			
			$.post("/get_artists?artist="+$('#searchtext').val(), {}, 

            function(data) {
				
				var artistHTML = '<div id="artist_search_res">';
				
				for(var i=0; i <data.length ; ++i){
					var artist = data[i];
					artistHTML += '<div id=\"info\">';
					artistHTML += '<a href="' + artist.url + '">';
					artistHTML += '<img width="100" height="100" src ="' + artist.image + '"/><br>' ;
					artistHTML += '<p style="width:100">' + artist.name + '</p> </a> </div>';
				}
				
				artistHTML += '</div>';
				
				$("#artistinfo").html(artistHTML);
				
            }, 'json');
		}
		
		function getEventList(artist,location,distance){
			$("#filters").html("");
			$("#artistinfo").html("");
			$("#eventsinfo").html('<center><img aliign= "center" src="jquery-ui/images/ajax-loader.gif" /></center>');
			$("#venueinfo").html("");
			$("#ticketinfo").html("");
			$("#trackinginfo").html("");
			$("#imageinfo").html("");
			
			$.post("/get_events?artist="+artist, {'distance':distance, 'location':location}, 
            function(data) {
				
				var eventHTML = "";
				if (data.length == 0) {
					eventHTML = "Sorry, No Events Found";
				}
				else {
					eventHTML += "<table id='events' border=1>";
					eventHTML += "<tr><th>Title</th><th>Artist</th><th>Venue</th><th>Date</th><th>Ticket Info</th></tr>";
					
					for (var i = 0; i < data.length; ++i) {
						var event = data[i];
						var alt = '';

						if (i % 2 == 0) 
							alt = 'alt';
						
						eventHTML += "<tr class='" + alt + "' style='height:25px'>";
						eventHTML += "<td><a href='" + event.url + "'>" + event.title + "</a></td>";
						eventHTML += "<td>" + event.artist + "</td>";
						eventHTML += "<td>" + event.venue + "-" + event.city + ", " + event.country + "</td>";
						eventHTML += "<td>" + event.date + "</td>";
						eventHTML += '<td> <form id="gettickets" artist="' + event.artist + '" date="' + event.simpleDate + '" venue="' +
						event.venue +
						'"> <input type="submit" class="btn" value="Check Tickets"></form>'
						eventHTML += "</tr>";
					}
				}
				$("#eventsinfo").html(eventHTML);
            }, 'json');
		}
		
		function getTicketList(artist, venue, date, sortoption) {
			$("#artistinfo").html("");
			$("#eventinfo").html("");
			$("#venueinfo").html("");
			$("#ticketinfo").html('<center><img aliign= "center" src="jquery-ui/images/ajax-loader.gif" /></center>');
			$("#imageinfo").html("");
			$("#eventsinfo").html("");
			
			$.post("/get_tickets?artist="+artist+"&venue="+venue+"&date="+date+"&sortoption="+sortoption, {}, 

            function(data) {
				
				if (data.length == 0) {
					$("#eventinfo").html("Sorry, there are no tickets available for this event");
					return;
				}
				
				$("#artistinfo").html('<a href="#" onClick="getEventList(\''+data.artist+'\')">Other events for '+data.artist+'</a>');
				
				var eventHTML = "";
				
				eventHTML += "Artist: <a href='"+data.artistURL+"' target='_blank'>"+data.artist+"</a><br>";
				eventHTML += "Venue: <a href='"+data.venueURL+"' target='_blank'>"+data.venue+"</a><br>";
				eventHTML += "Date: "+data.date+"<br><br>";
				
				$("#eventinfo").html(eventHTML);
				$("#imageinfo").html("<img height='300' width='300' src='"+data.imageURL+"'/><br><br>");
				
				var otherHTML = "";
				otherHTML += "<h1 class='title'><a href='"+data.eventURL+"' target='_blank'>"+data.description+"</a> </h1>"
				otherHTML += '<div id="track_button"> <form name="trackform" action="" method="post">';
			    otherHTML += '<input type="submit" class="btn" id="track" name="track" value="Track"></form> </div> ';
				$("#venueinfo").html(otherHTML);
				
				createTicketTable(data);
				
//				var trackingHTML = "";
//				trackingHTML += '<form name="trackform" action="" method="post">';
//			    trackingHTML += '<input type="submit" class="btn" id="track" name="track" value="Track"></form>';
//				$("#trackinginfo").html(trackingHTML);
				
				//Set the slider max price
				$("#slider").slider("option", "max", maxPrice);
				$("#slider").slider( "option", "values", [0, maxPrice] );
				$("#priceamount").html('Price Range: $' + $("#slider").slider("values", 0) + ' - $' + $("#slider").slider("values", 1));
				
				displayFilters();
				
            }, 'json');
		}
		
		function createTicketTable(data) {
			$("#ticketinfo").html('<center><img aliign= "center" src="jquery-ui/images/ajax-loader.gif" /></center>');
			var ticketHTML = "<table id='events' border=1>";
			ticketHTML += "<tr><th>Price</th><th>Section</th><th>Row</th><th>Quantity</th></tr>";

			for (var i = 0; i < data.tickets.length; ++i) {
				var ticket = data.tickets[i];
				eventID = ticket.event_id;

				ticketURL = data.eventURL + "/?ticket_id=" + ticket.id;
				
				var alt = '';
				if (i % 2 == 0) 
					alt = 'alt';
				
				ticketHTML += "<tr class='"+alt+"' style='height:25px'>";
				ticketHTML += "<td><a href='"+ticketURL+"' target='_blank'>"+ticket.curr_price+"</a></td>";
				ticketHTML += "<td>"+ticket.section+"</td>";
				ticketHTML += "<td>"+ticket.row_desc+"</td>";
				ticketHTML += "<td>"+ticket.quantity+"</td>";
				
				ticketHTML += "</tr>";
				
				if (maxPrice < ticket.curr_price) maxPrice = ticket.curr_price;
			}
			
			ticketHTML += "</table>";
			$("#ticketinfo").html(ticketHTML);
		}
		
		function beginTracking(eventID, sectionID, sectionName) {
			$("#track_button").html('<center><img aliign= "center" src="jquery-ui/images/ajax-loader.gif" /></center>');
			a = getUrlVars();
			$.post("/begin_track?eventID="+eventID ,a ,
			function(dat) {
				$("#track_button").html("Tracked");
				if (!dat[0]){
					//top.location.href = dat[1];
				}
				
			},'json');
		}
		
		function displayFilters() {
				
			$("#filters").html("<b>Filter Results:</b><br><br>");
				
			//Add Quantity Filter
			var qtyHTML = "";
			
			qtyHTML += '<form id="filterform">';
			qtyHTML += 'Quantity: ';
			qtyHTML += '<select id="quantity">'; 
			qtyHTML += '<option value="all">All</option>';
			
			for (var i = 1; i < 10; ++i) {
				qtyHTML += '<option value="'+i+'">'+i+'</option>';
			}
			
			qtyHTML += '<option value="10">10 or more</option>';
			qtyHTML += '</select></form>';
			
			$("#filters").html($("#filters").html()+qtyHTML);
			
			//Add Price Filter
			var priceHTML = "";
			priceHTML += '<div id="priceamount"></div>';
			priceHTML += '<div id="slider"></div>';
			
			$("#filters").html($("#filters").html()+priceHTML);			
			
			$("#slider").slider({
				range: true,
				min: 0,
				max: maxPrice,
				values: [0, maxPrice],
				slide: function(event, ui) {
					$("#priceamount").html('Price Range: $' + ui.values[0] + ' - $' + ui.values[1]);
				},
				change: function(event, ui) {
					filterResults();
				}
			});
			$("#priceamount").html('Price Range: $' + $("#slider").slider("values", 0) + ' - $' + $("#slider").slider("values", 1));
		}
		
		function filterResults() {
			var qty = $("#quantity").val();
			if (qty == "all") qty = "0";
			
			var values = $("#slider").slider( "option", "values" );
			
			$.post("/filter_tickets?eventID="+eventID+"&quantity="+qty+"&sortoption=price"+"&minPr="+values[0]+"&maxPr="+values[1], {}, 

            function(data) {
				createTicketTable(data)
			}, 'json');
		}
		
		function redir_main_page() {
			top.location.href = "http://apps.facebook.com/concert-deals";
		}
		
	</script>
	
</head>
<body
	{% ifequal artist '' %}
	>
	{% else %}
		{% ifequal venue '' %}
			onload="getEventList('{{artist}}')">
		{% else %}
			onload="getTicketList('{{artist}}','{{venue}}','{{date}}','price')">
		{% endifequal %}
	
	{% endifequal %}

	<!-- end #header -->
	<div id="menu">
		<ul>
			<li><a href="#" id="home_page">Home</a></li>
			<li class="first"><a href=# id="search_page">Search</a></li>
			<li><a href=# id="track_page">Tracks</a></li>
		</ul>
	</div>
	<!-- end #menu -->
	
	<div id="wrapper">
	<div class="btm">
	<div id="page">
	
	<form name="gettix" action="" method="post">
        &nbsp;&nbsp; <input type="text" class="btn" id="searchtext" name="searchtext" value="">
		
		&nbsp; by &nbsp;
		<select id="searchtype">
			<option value="artist">Artist</option>
			<option value="location">Location</option>
		</select>
		
		&nbsp;
		<span id="selectdist"></span>
		
		<input type="submit" class="btn" id="search" name="search" value="Search"> &nbsp;&nbsp;
		<br>
    </form>
	
	<div id="artistinfo"></div>
	<div id="eventsinfo"></div>
	<div id="content">
		<div id="venueinfo" class="post"></div>
		<div id="trackinginfo"></div>
		<div id="ticketinfo"></div>
	</div>

	<div id="sidebar">
		<div id="eventinfo"></div>
		<div id="filters" class="filters"></div>
		<div id="imageinfo"></div>
	</div>
	<div style="clear: both;">&nbsp;</div>
	<br><br>

	</div>
	</div>
	</div>

</body>
</html>